<template>
    <div class="publish">
        <div class="list flex-between">
            <div class="label">发起筹款</div>
            <ul class="right flex-between">
                <li class="flex" :class="{'active':tabIndex == 1}" @click="changeTab(1)"><div></div>互助筹款</li>
                <li class="flex" :class="{'active':tabIndex == 2}" @click="changeTab(2)"><div></div>有偿筹款</li>
            </ul>
        </div>
        <div class="list" v-if="tabIndex == 2">
            <div class="label">筹款企业</div>
            <div class="right">
                <input placeholder="填写您需筹款企业的全称" v-model="ename">
            </div>
        </div>
        <div class="list" v-if="tabIndex ==2">
            <div class="label">企业证明</div>
            <div class="right">
                <div class="upload-box upload-box1 flex-center">
                    <div>
                        <img src="../assets/img/camera.png" alt="">
                        <p>上传企业营业执照</p>
                    </div>
                    <img :src="image1" alt="" v-if="image1">
                    <input type="file" accept="image/*" data-type="0" @change="upload">
                </div>
            </div>
        </div>
        <div class="list">
            <div class="label flex-between">
                <p class="label-left">目标金额</p>
                <p class="label-right">当前可筹金额剩余<span>{{surplus}}</span></p>
            </div>
            <div class="right">
                <input type="number" placeholder="填写您想要筹的金额(可在“我的积分”中提现)" v-model="money">
            </div>
        </div>
        <div class="list">
            <div class="label">筹款标题</div>
            <div class="right">
                <input type="text" placeholder="一句话简单描述您的情况(25个字以内)" v-model="title">
            </div>
        </div>
<!--        <div class="list">-->
<!--            <div class="label">求助说明</div>-->
<!--            <div class="right">-->
<!--                <textarea style="height: 130px" :placeholder="placeholder" v-model="describe"></textarea>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="list">-->
<!--            <div class="label">添加图片</div>-->
<!--            <p v-if="tabIndex == 1">建议上传患病前阳光生活照、患病后医院治疗照，更易获得广大爱心人士的信任和帮助，更快筹到救命钱！</p>-->
<!--            <p v-if="tabIndex == 2">建议上传产品或研发项目的介绍宣传图</p>-->
<!--            <div class="right flex dd">-->
<!--                <div class="upload-box flex-center" v-for="(item,index) in images" v-if="item">-->
<!--                    <img :src="item" alt="">-->
<!--                    <i class="iconfont iconguanbi" @click="deleteImg(index)"></i>-->
<!--                </div>-->
<!--                <div class="upload-box flex-center" v-if="images.length < 6">-->
<!--                    <div>-->
<!--                        <img src="../assets/img/camera.png" alt="">-->
<!--                        <p>添加照片</p>-->
<!--                    </div>-->
<!--                    <input type="file" multiple="multiple" accept="image/*" data-type="1" @change="upload1">-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <button class="submit" @click="submit">提交</button>
    </div>
</template>

<script>
    import { Previewer,TransferDom } from 'vux'
    import Vue from 'vue'
    export default {
        name: "publish",
        components:{
            Previewer
        },
        directives: {
            TransferDom
        },
        data(){
          return {
              image:"",
              image1:"",
              tabIndex:1,
              title:"",
              money:"",
              describe:"",
              images:[],
              ename:"",
              surplus:null,
              placeholder:'简单描述你是谁，家在哪里，患了什么病，预计要花多少医疗费，还差多少钱等等。'
          }
        },
        created(){
            this.$http.post('user/getUserInfo',{}).then(res=>{
                console.log(res)
                let user =  res.data;
                this.surplus = Number(user.maxmoney) - Number(user.endmoney)
                this.$store.dispatch('changeUser',res.data)

            })

        },
        methods:{
            changeTab(index){
              this.tabIndex = index ;
              this.placeholder = index == 1? '简单描述你是谁，家在哪里，患了什么病，预计要花多少医疗费，还差多少钱等等。' :'简单描述现要研发项目的具体情况，产品的具体介绍'
            },
            show (index) {
                this.$refs.previewer.show(index)
            },
            deleteImg(index){
                this.images.splice(index,1)
            },
            upload(e){
                let file = e.target.files[0]
                let reader = new FileReader();
                reader.readAsDataURL(file)
                reader.onload = res => {
                    this.$http.post('uploads/image',{
                        base64:res.target.result
                    }).then(res1=>{
                        console.log(res1)
                        this.image1 = res1.data;
                    })
                }
            },
            upload1(e){
                let files = e.target.files;
                let arr = [];
                let len = this.images.length;
                for(let i = 0;i < files.length;i++){
                    let reader = new FileReader();
                    reader.readAsDataURL(files[i])
                    reader.onload = res => {
                        this.$http.post('uploads/image',{
                            base64:res.target.result
                        }).then(res1=>{
                            console.log(res1.data)
                            console.log(len + i)
                            if(len + i <= 5){
                                Vue.set(this.images,len + i,res1.data)
                            }
                        })
                    }
                }
                if(this.images.length > 6){
                    this.images.length = 6
                }

            },
            submit(){

                if(!this.title || !this.money){
                    this.$toast('参数不能为空')
                    return
                }
                if(this.tabIndex == 2){
                    if(!this.ename || !this.image1){
                        this.$toast('参数不能为空')
                        return
                    }
                }
                if(this.money > this.surplus){
                    this.$toast('剩余可筹额度不足')
                    return;
                }
                this.$http.post('index/crowdfundingCreate',{
                    typeid:this.tabIndex,
                    title:this.title,
                    money:Number(this.money),
                    ename:this.ename,
                    image:this.image1
                }).then(res=>{
                    this.$toast(res.msg)
                    if(res.code == 1){
                        setTimeout(()=>{
                            this.$router.go(-1);
                        },500)

                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .publish{
        min-height: calc(100vh - 90px);
        background: white;
        padding: 30px 30px 120px;
        box-sizing: border-box;
        .label{
            font-size: 32px;
            color: #333333;
            font-weight: bold;
            .label-left{
                font-size: 32px;
                color: #333333;
                font-weight: bold;
            }
            .label-right{
                font-weight: normal;
                color:#333 !important;
                span{
                    color:#185fff;
                }
            }
        }

        .list{
            margin-bottom: 45px;
            ul{
                width: 380px;
            }
            li{
                font-size: 28px;
                font-weight: bold;
                div{
                    width: 32px;
                    height: 32px;
                    border: solid 2px #c2c2c2;
                    border-radius: 50%;
                    margin-right: 5px;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                }
            }
            .active div{
                border-color: #185fff;
                &:after{
                    content:"";
                    width: 15px;
                    height: 15px;
                    background: #185fff;
                    border-radius: 50%;
                }
            }
            .right>input{
                width:100%;
                background-color: #f9f9f9;
                border-radius: 10px;
                padding: 30px;
                box-sizing: border-box;
                margin-top: 20px;
            }
            textarea{
                width:100%;
                background-color: #f9f9f9;
                border-radius: 10px;
                padding: 30px;
                box-sizing: border-box;
                margin-top: 20px;
            }
            p{
                font-size: 24px;
                line-height: 38px;
                color: #999999;
                margin-top: 15px;
            }
        }
        .dd{
            flex-wrap: wrap;
            .upload-box{
                margin-right: 25px;
            }
        }
        .upload-box{
            width: 200px;
            height: 200px;
            background-color: #f9f9f9;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            margin-top: 20px;
            div{
                text-align: center;
                p{
                    font-size: 24px;
                    color: #999999;
                    margin-top: 5px;
                }
            }
            i{
                position: absolute;
                right:0;
                top:0;
                z-index: 2;
                padding: 10px;
            }
            &>img{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height:100%;
                object-fit: cover;
                background: white;
                border-radius: 10px;
            }
            input{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height:100%;
                z-index: 1;
                opacity: 0;
            }
        }
        .upload-box1{
            width: 345px;
            height: 240px;
        }
        .submit{
            position: fixed;
            width: 100%;
            bottom:0;
            left:0;
            height: 98px;
            background: #185fff;
            font-size: 32px;
            color:white;
            z-index: 15;
        }
    }
</style>
